<template>
  <div class="user_list">
    <p style="font-size: 24px; color: #000">请选择成员一键关联</p>
    <ul
      style="
        margin-top: 50px;
        height: 800px;
        overflow: auto;
        padding-bottom: 60px;
      "
    >
      <li
        :class="item == 1 ? 'li_y' : 'li_'"
        v-for="item in 10"
        :key="item"
        @click="card_c(item)"
      >
        <p class="p_s">
          <span style="font-size: 24px; font-weight: 700">张三{{ item }} </span>
          <van-button plain type="info" style="float: right" size="small">{{
            item == 1 ? "户主" : "成员"
          }}</van-button>
        </p>
        <p class="p_s">证件号：4120543212315120</p>
        <p class="p_s">
          手机号：130154851348
          <i
            class="iconfont icon_"
            style="color: red; font-size: 28px; float: right"
            @click.stop="del_item(item)"
            >&#xe68e;</i
          >
        </p>
      </li>
      <p
        style="
          text-align: center;
          color: #1989fa;
          font-size: 20px;
          font-weight: 700;
        "
        @click="todo_add"
      >
        <i class="el-icon-circle-plus"></i>
        新增家庭成员
      </p>
    </ul>
    <p
      style="
        font-size: 12px;
        position: absolute;
        bottom: 20px;
        right: calc(50vw - 90px);
        margin-right: 20px;
        color: red;
      "
    >
      点击卡片选择当前成员
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      patCardNo: "123",
    };
  },
  methods: {
    card_c() {
      this.$router.push("/login");
    },
    todo_add() {
      this.$router.push("/carte_da");
    },
  },
};
</script>

<style scoped lang='scss'>
.user_list {
  padding: 25px;
  background-color: #fff;
  height: 90vh;
  overflow: hidden;
  .li_ {
    width: 93%;
    padding: 15px 25px;
    border: 1px solid deepskyblue;
    border-radius: 15px;
    margin-bottom: 20px;

    .p_s {
      margin: 20px 0;
    }
  }

  .li_y {
    width: 93%;
    padding: 15px 25px;
    border: 1px solid deepskyblue;
    border-radius: 15px;
    margin-bottom: 20px;
    background-color: lightskyblue;
    color: #fff;

    .p_s {
      margin: 8px 0;
    }
  }
}
</style>